<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>请求中转站</title>
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" media="screen">
  <!-- <link href="https://cdn.bootcdn.net/ajax/libs/layui/2.9.21/css/layui.min.css" rel="stylesheet"> -->
  <link href="./css/layui.min.2.9.21.css" rel="stylesheet">
  <link href="./css/index.css" rel="stylesheet">
</head>

<body>
  <div class="layui-row main">
    <div class="layui-col-sm2 layui-col-xs0"> </div>
    <div class="layui-col-sm8 layui-col-xs12">


      <form class="layui-form" action="script:;">
        <div class="layui-form-item">
          <div class="layui-input-group" style="width: 100%;">
            <input id="search" name="search" type="text" placeholder="请输入需要转发的url" class="layui-input">
            <div class="layui-input-split layui-input-suffix" lay-submit lay-filter="demo1" style="cursor: pointer;">
              <i class="layui-icon layui-icon-search"></i>
            </div>
            <div class="layui-input-split layui-input-suffix" lay-submit lay-filter="cope" style="cursor: pointer;">
              <i class="layui-icon layui-icon-templeate-1"></i>
            </div>
          </div>
        </div>
      </form>

    </div>
    <div class="layui-col-sm2 layui-col-xs0"> </div>

  </div>


  <iframe src="./dec.html" id="openurl" width="100%" frameborder="0"></iframe>

  <script src="./js/layui.min.2.9.21.js"></script>
  <script src="./js/axios.js"></script>
  <script>

    let openurl = document.getElementById('openurl');
    let loadIndex;

    layui.use(function () {
      var layer = layui.layer;
      var form = layui.form;
      var table = layui.table;
      var util = layui.util;

      // 提交事件
      form.on('submit(demo1)', function (data) {

        let url = data.field.search;
        openNewiframe(url);

        return false; // 阻止默认 form 跳转
      });
      form.on('submit(cope)', function (data) {

        let url = data.field.search;

        copyText(location.origin + '/?url=' + encodeURIComponent(url));
        layer.msg('已复制url');

        return false;
      });
      document.getElementById('search').addEventListener('keydown', function (event) {
        if (event.key === 'Enter' || event.keyCode === 13) {
          event.preventDefault();

          let url = event.target.value;
          openNewiframe(url);

        }
      });

      function openNewiframe(url) {
        if (url) {
          try { new URL(url) } catch (error) { alert('请输入正确的url'); return; }

          loadIndex = layer.load(0, {
            shadeClose: true
          }); // 加载层

          openurl.src = location.origin + '/?url=' + encodeURIComponent(url);
        }
        else alert('不能为空哦')
      }

      // 监听 load 事件
      openurl.addEventListener('load', () => {
        layer.close(loadIndex); // 取消加载层

        // 获取文档的总高度
        const scrollHeight = Math.max(
          document.body.scrollHeight,
          document.documentElement.scrollHeight,
          document.body.offsetHeight,
          document.documentElement.offsetHeight,
          document.body.clientHeight,
          document.documentElement.clientHeight
        );

        // 向下滚动到底部，添加平滑滚动效果
        window.scrollTo({
          top: scrollHeight,
          behavior: 'smooth' // 可选，如果你想要平滑滚动效果
        });
      });

      // 监听 error 事件
      openurl.addEventListener('error', () => {
        layer.close(loadIndex); // 取消加载层
      });

    });


    // 复制文本内容
    function copyText(text) {
      // let inputDom = document.createElement('input');  // 创建一个input元素
      let inputDom = document.createElement('textarea');  // 创建一个input元素
      inputDom.setAttribute('readonly', 'readonly'); // 防止手机上弹出软键盘
      inputDom.value = text; // 给input元素赋值
      document.body.appendChild(inputDom); // 添加到body
      inputDom.select(); //选中input元素的内容
      document.execCommand('Copy'); // 执行浏览器复制命令
      inputDom.style.display = 'none';
      inputDom.remove(); // 移除input元素
    }
  </script>
</body>

</html>